<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>与木共舞板材网</title>
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <header class="login-logo">
        <img src="img/logo.png" />
    </header>
    <section class="login-form">
        <dl>
            <dt><i class="iconfont icon-yonghu"></i></dt>
            <dd><input type="tel" maxlength="11" name="phone" placeholder="请输入手机号" autocomplete="off" /></dd>
        </dl>
        <dl>
            <dt><i class="iconfont icon-mima"></i></dt>
            <dd><input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" /></dd>
        </dl>
        <p>
            <a href="{:Url('user/reg')}">立即注册<i class="iconfont icon-youjiantou"></i></a>
            <a href="{:Url('index/getPassword')}">忘记密码<i class="iconfont icon-youjiantou"></i></a>
        </p>
        <button class="submit-btn">登录</button>
    </section>
    <footer class="login-wechat">
        <dt>
            <a href="{:url('wap/auth/weixinLogin')}">
                <img src="img/wechat.png">
            </a>
        </dt>
        <dd>微信登录</dd>
    </footer>
    <aside>
        <div class="js_dialog" id="login-feedback">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__bd" id="login-text">手机号码不得为空</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="login-close">知道了</a>
                </div>
            </div>
        </div>
        <div id="toast">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content" id="toast-text">已完成</p>
            </div>
        </div>
    </aside>
    <!-- js -->
    <aside>
        <script>
            $('.submit-btn').bind('click', () => {
                let phone = $("[name='phone']").val();
                let pwd = $("[name='pwd']").val();
                let data = {
                    phone,
                    pwd
                }
                let status = login.verify(phone, pwd);
                if (!status) return false
                login.submit(data)
            })

            $('#login-close').bind('click', () => {
                login.feedbackClose()
            })


            class Login {
                constructor() {
                    this.feedback = $('#login-feedback');
                    this.toast = $('#toast');
                    this.toastText = $('#toast-text');
                    this.text = $('#login-text');
                    this.close = $('#login-close')
                    this.url = "{:url('wap/user/login')}";
                    this.feedback.hide()
                    this.toast.hide()
                }
                feedbackOpen(text) {
                    this.feedback.fadeIn(200);
                    this.text.text(text)
                }
                feedbackClose() {
                    this.feedback.fadeOut(200)
                }
                verify(phone, pwd) {
                    let regPhone = /^1(3|4|5|7|8)\d{9}$/;
                    if (!phone) return this.feedbackOpen('手机号码不得为空');
                    if (!regPhone.test(phone)) return this.feedbackOpen('手机号码格式不正确');
                    if (!pwd) return this.feedbackOpen('密码不得为空');
                    return true
                }
                toast(text) {
                    this.toastText.text(text);
                    this.toast.fadeIn(100);
                    setTimeout(() => {
                        this.toast.fadeOut(100);
                    }, 2000)
                }
                submit(data) {
                    $.post(url, data, (result) => {
                        if (result.code == 200) {
                            toast(result.msg)
                            window.location.href = result.data;
                        } else {
                            this.feedbackOpen(result.msg);
                        }
                    }, 'json');
                }
            }
            const login = new Login()
        </script>
    </aside>
    <!-- js -->
</body>

</html>